<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title><% preact.title %></title>
		<meta name="viewport" content="width=device-width,initial-scale=1">
		<meta name="mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<link rel="apple-touch-icon" href="/assets/icons/apple-touch-icon.png">
		<% preact.headEnd %>

		<style>
			.element {
				border: 2px dashed red;
				border-radius: 0;
				box-sizing: border-box;
				padding: 20px;
				position: fixed;
				text-align: center;
				text-decoration: none;
				width: 200px;
			}

			.element-left {
				left: -100px;
			}

			.element-right {
				right: -100px;
			}

			.element-top {
				top: -30px;
			}

			.element-bottom {
				bottom: -30px;
			}
			
			.element-left,
			.element-center,
			.element-right {
				top: 50%;
				margin-top: -30px;
			}
			
			.element-top,
			.element-center,
			.element-bottom {
				left: 50%;
				margin-left: -100px;
			}

			.element-image {
				padding: 0;
				left: 50%;
				margin-left: -300px;
				margin-top: -150px;
				top: 50%;
				width: 600px;
			}

			.element-image img {
				max-width: 100%;
				max-height: none;
				display: block;
			}
		</style>

		<script src="https://localhost:5001/scripts/test.js"></script>
	</head>
	<body>
		<% preact.bodyEnd %>

		<div class="element element-top" data-squidex-token="eyJhIjoic3F1aWRleC13ZWJzaXRlIiwicyI6ImJsb2ciLCJpIjoiZmQxZDkzNjYtNDY3ZS00MmFiLWE5MzYtYmNmNDk3NjIxYjk4IiwidSI6Imh0dHBzOi8vbG9jYWxob3N0OjUwMDEvIn0=">
			Top Aligned
		</div>

		<div class="element element-right" data-squidex-token="ewogICJ1IjogImh0dHBzOi8vbG9jYWxob3N0OjUwMDEiLAogICJhIjogInRlc3QiLAogICJzIjogInRlc3QiLAogICJpIjogIjI0ZWQxMWJhLWJjNzItNDMzZS04ODRjLWE0NGE3ODIwYjU1MSIgIAp9">
			Right Aligned
		</div>

		<div class="element element-bottom" squidex-token="ewogICJ1IjogImh0dHBzOi8vbG9jYWxob3N0OjUwMDEiLAogICJhIjogInRlc3QiLAogICJzIjogInRlc3QiLAogICJpIjogIjI0ZWQxMWJhLWJjNzItNDMzZS04ODRjLWE0NGE3ODIwYjU1MSIgIAp9">
			Bottom Aligned
		</div>

		<div class="element element-left" squidex-token="ewogICJ1IjogImh0dHBzOi8vbG9jYWxob3N0OjUwMDEiLAogICJhIjogInRlc3QiLAogICJzIjogInRlc3QiLAogICJpIjogIjI0ZWQxMWJhLWJjNzItNDMzZS04ODRjLWE0NGE3ODIwYjU1MSIgIAp9">
			Left Aligned
		</div>

		<div class="element element-image">
			<img src="https://cloud.squidex.io/api/assets/squidex-website/1aee5277-ea35-4d6f-9c4f-9239b371e841/image.png?version=0">
		</div>

		<div class="element element-center" squidex-token="ewogICJ1IjogImh0dHBzOi8vbG9jYWxob3N0OjUwMDEiLAogICJhIjogInRlc3QiLAogICJzIjogInRlc3QiLAogICJpIjogIjI0ZWQxMWJhLWJjNzItNDMzZS04ODRjLWE0NGE3ODIwYjU1MSIgIAp9">
			 Center
		</div>
	</body>
</html>
